<template>
  <div class="page-content">
    <a-card style="width: 100%; height: 100%">
      <div class="header">
        <a-form
          ref="formRef"
          class="search-form"
          :model="formState"
          layout="inline"
          style="width: 100%"
        >
          <a-form-item>
            <a-input placeholder="请输入内容"></a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" ghost>查询</a-button>
            <a-button type="primary">新建专病库</a-button>
          </a-form-item>
        </a-form>
      </div>
      <div class="main">
        <div class="disease-lib-item">
          <div>
            <p>专病库名称</p>
            <p>
              <span>病例数：</span>
              <span></span>
            </p>
            <p>
              <span>创建者：</span>
              <span></span>
            </p>
            <p>
              <span>创建时间：</span>
              <span></span>
            </p>
            <p>
              <span>入库条件：</span>
              <span></span>
            </p>
          </div>
          <div style="border-top: 1px solid #ccc">
            <div>
              <span>更新时间：</span>
            </div>
            <div>
              <a-button type="link">患者检索</a-button>
              <a-divider type="vertical" />
              <a-button type="link" danger>删除</a-button>
              <a-divider type="vertical" />
              <a-button type="link">详情</a-button>
            </div>
          </div>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'

import { Modal, message } from 'ant-design-vue'
import dayjs from 'dayjs'

const formRef = ref()
interface FormState {}
const formState: UnwrapRef<FormState> = reactive({
  labelName: ''
})

const loading = ref<boolean>(false)
const List = ref<any[]>([])
const showDetail = ref(false)

onMounted(() => {})
</script>

<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
}

.main {
  margin-top: 16px;
  flex: 1 1 auto;
  overflow: hidden auto;
}

.disease-lib-item {
  margin: 0 16px 16px 0;
}
</style>
